<template>
  <div>
    <v-viewer ref="view"></v-viewer>
    <div class="user-area">
      <div class="title">
        <div class="point"></div>
        <span v-if="!isInfo">设置用户</span>
        <span v-else>用户详情</span>
      </div>
      <el-row :gutter="10">
        <el-col :span="3">
          <div class="content-title">
            <span>姓名</span>
          </div>
        </el-col>
        <el-col :span="7">
          <el-input v-if="!isInfo"
                    v-model="userInfo.name"
                    size="small"></el-input>
          <span v-else>{{ userInfo.name }}</span>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="3">
          <div class="content-title">
            <span>手机号</span>
          </div>
        </el-col>
        <el-col :span="7">
          <el-input v-if="!isInfo"
                    v-model.number="userInfo.phone"
                    size="small"></el-input>
          <span v-else>{{ userInfo.phone }}</span>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="3">
          <div class="content-title">
            <span>密码</span>
          </div>
        </el-col>
        <el-col :span="7">
          <el-input v-if="!isInfo"
                    v-model="userInfo.password"
                    size="small"
                    :disabled="isInfo"></el-input>
          <span v-else>{{ userInfo.password }}</span>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="3">
          <div class="content-title">
            <span>提成</span>
          </div>
        </el-col>
        <el-col :span="7">
          <el-input v-if="!isInfo"
                    v-model="userInfo.extract"
                    size="small"
                    placeholder="%"
                    :disabled="isInfo"></el-input>
          <span v-if="isInfo && userInfo.extract">{{ userInfo.extract }}%</span>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="3">
          <div class="content-title">
            <span>职位</span>
          </div>
        </el-col>
        <el-col :span="7">
          <el-select v-if="!isInfo"
                     filterable
                     v-model="userInfo.roleId"
                     placeholder="请选择">
            <el-option v-for="(item, key) in roles"
                       :key="key"
                       :label="item.roleName"
                       :value="item.roleId"></el-option>
          </el-select>
          <span v-else>{{ userInfo.roleName }}</span>
        </el-col>
      </el-row>
      <div class="title"
           v-if="isInfo">
        <div class="point"></div>
        <span>历史订单</span>
      </div>
      <el-table v-if="isInfo"
                ref="multipleTable"
                border
                stripe
                :data="order"
                style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-table :data="props.row.childOrder">
              <el-table-column prop="corderCode"
                               label="编号">
              </el-table-column>
              <el-table-column prop="productName"
                               label="货名">
              </el-table-column>
              <el-table-column prop="sku"
                               label="型号">
              </el-table-column>
              <el-table-column label="产品图片">
                <template slot-scope="scope">
                  <pic-view :file-list="scope.row.productUrlList"
                            upload-class="small-upload close-delete"
                            :pic-name-list.sync="scope.row.productNameList"
                            :max-size="scope.row.productUrlList?scope.row.productUrlList.length:0"
                            :upload-data="{ fileName: 'product' }"
                            @showImg="showImg"></pic-view>
                </template>
              </el-table-column>
              <el-table-column prop="size"
                               label="长宽高">
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column prop="createdTime"
                         label="创建时间">
        </el-table-column>
        <el-table-column prop="customerName"
                         label="客户名">
        </el-table-column>
        <el-table-column prop="customerPhone"
                         label="客户手机号">
        </el-table-column>
        <el-table-column prop="orderCode"
                         label="订单编号">
        </el-table-column>
        <el-table-column prop="orderStatusName"
                         label="订单状态">
        </el-table-column>
      </el-table>
      <div v-if="!isInfo"
           class="foot">
        <el-button @click="setUser"
                   type="primary">确定</el-button>
        <el-button @click="() => {this.$router.go(-1)}"
                   type="primary">取消</el-button>
      </div>
      <div v-else
           class="foot">
        <el-button @click="() => {this.$router.go(-1)}"
                   type="primary">确定</el-button>
      </div>
    </div>
  </div>
</template>

<style>
</style>

<script>
import '@/style/info.scss'
import { api } from '@/api'
import { HTTPSUCCESS, HTTPDATAFAIL, HTTPPARAMFAIL, HTTPUNKOWNFAIL } from '@/components/constant'
import { validatenull } from '@/utils/validate'
import { packageImgList } from '@/utils/imgPackage'
import picView from '@/components/pic-viewer-up'
import vViewer from '@/components/v-viewer'

export default {
  data() {
    return {
      isInfo: this.infoFlag === '1',
      userInfo: {},
      order: [],
      roles: []
    }
  },
  components: {
    picView, vViewer
  },
  props: [
    'userId', 'infoFlag'
  ],
  computed: {
  },
  activated() {
    this.getUserDetail()
    this.getRoleList()
  },
  methods: {
    getRoleList() {
      this.$http.get(api.USER_ROLE_LIST).then(
        res => {
          this.roles = res.result
        }
      )
    },
    getUserDetail() {
      this.$http.get(api.USER_DETAIL, { id: this.userId }).then(
        res => {
          this.userInfo = res.result
          this.order = res.result.order
          this.order.forEach(e => {
            e.childOrder.forEach(ele => {
              if (ele.productPic) {
                const productList = packageImgList(ele.productPic)
                ele.productNameList = productList[0]
                ele.productUrlList = productList[1]
              }
            })
          })
        }
      )
    },
    setUser() {
      const params = {
        id: this.userInfo.userId,
        name: this.userInfo.name,
        password: this.userInfo.password,
        phone: this.userInfo.phone,
        roleId: this.userInfo.roleId,
        extract: this.userInfo.extract
      }
      this.$http.post(api.USER_EDIT, params).then(
        res => {
          if (res.error.code === HTTPSUCCESS) {
            this.$msg._message('设置成功！', 'success')
            this.$router.push({ name: 'user' })
          } else {
            this.$msg._message(res.error.message, 'error')
          }
        }
      )
    },
    showImg(url) {
      this.$refs.view.showImg(url)
    }
  }
}
</script>
